/* =====================================================
   GI2 PAWS MOBILE BASE
   For all mobile sizes <= 768px
   Do not write @media in this file.
   ===================================================== */


/* ===== 00 MOBILE GLOBAL SAFETY START ===================================================================================================================*/
html,
body {
  width: 100% !important; /* 页面宽度跟手机走 */
  max-width: 100% !important; /* 不超过手机宽度 */
  margin: 0 !important; /* 删除默认外距 */
  padding: 0 !important; /* 删除默认内距 */
  overflow-x: hidden !important; /* 不要左右滑 */
}

*,
*::before,
*::after {
  box-sizing: border-box !important; /* padding 不撑爆 */
}

img,
video {
  max-width: 100% !important; /* 图片不超过屏幕 */
}
/* ===== 00 MOBILE GLOBAL SAFETY END ===== */


/* ===== 01 NAVBAR MOBILE START ===== */

/* 整个 header / navbar */
  .site-header {
    position: sticky !important; /* navbar 跟着 scroll 固定在顶部 */
    top: 0 !important; /* 固定在最上面 */
    z-index: 99999 !important; /* 保证 navbar 在最上层 */

    width: 100% !important; /* navbar 宽度 */
    max-width: 100% !important; /* 防止超过手机宽度 */

    background: rgba(255, 248, 238, 0.96) !important; /* navbar 背景颜色 */
    backdrop-filter: blur(14px) !important; /* 背景模糊玻璃效果 */

    overflow: visible !important; /* dropdown 可以显示出来，不会被切掉 */
  }

  /* navbar 里面的容器 */
  .site-header .nav-wrap {
    position: relative !important; /* 让 dropdown 可以定位在它下面 */

    width: 100% !important; /* 容器宽度 */
    max-width: 100% !important; /* 不超过手机宽度 */

    padding-top: 10px !important; /* navbar 上方空间 */
    padding-right: 16px !important; /* navbar 右边空间 */
    padding-bottom: 10px !important; /* navbar 下方空间 */
    padding-left: 16px !important; /* navbar 左边空间 */

    display: flex !important; /* logo 和 menu 横排 */
    align-items: center !important; /* 上下居中 */
    justify-content: space-between !important; /* logo 左边，menu 右边 */

    overflow: visible !important; /* dropdown 不会被切掉 */
    box-sizing: border-box !important; /* padding 不会撑爆宽度 */
  }

  /* logo + Gi² Paws 整组 */
  .site-header .brand {
    position: relative !important; /* 让 logo 整组可以移动 */
    left: 0px !important; /* logo 整组左右移动 */
    top: 0px !important; /* logo 整组上下移动 */

    display: inline-flex !important; /* logo 图片和文字横排 */
    align-items: center !important; /* logo 和文字上下居中 */
    gap: 8px !important; /* logo 图片和文字距离 */

    max-width: 230px !important; /* logo 整组最大宽度 */
    text-decoration: none !important; /* 去掉底线 */
  }

  /* logo 图片 */
  .site-header .brand img {
    width: 50px !important; /* logo 图片宽度 */
    height: 50px !important; /* logo 图片高度 */

    border-radius: 12px !important; /* logo 圆角 */
    object-fit: cover !important; /* 图片填满 */
    object-position: center !important; /* 图片位置 */
    display: block !important; /* 去掉图片底部空隙 */
  }

  /* Gi² Paws 文字 */
  .site-header .brand-title {
    color: #174d32 !important; /* brand 主文字颜色 */
    font-family: inherit !important; /* 使用网站原本字体 */
    font-size: 20px !important; /* brand 主文字大小 */
    font-weight: 900 !important; /* brand 主文字粗细 */
    line-height: 1 !important; /* 行高 */
  }

  /* Official Website 小字 */
  .site-header .brand-stack small {
    color: #5b6858 !important; /* 小字颜色 */
    font-family: inherit !important; /* 小字字体 */
    font-size: 12px !important; /* 小字大小 */
    font-weight: 700 !important; /* 小字粗细 */
    line-height: 1.1 !important; /* 小字行高 */
  }

  /* hamburger menu button */
  .site-header .menu-toggle {
    position: relative !important; /* 让 menu button 可以移动 */
    left: 0px !important; /* menu button 左右移动 */
    top: 0px !important; /* menu button 上下移动 */

    width: 42px !important; /* menu button 宽度 */
    height: 42px !important; /* menu button 高度 */

    display: inline-flex !important; /* 让 icon 可以居中 */
    align-items: center !important; /* icon 上下居中 */
    justify-content: center !important; /* icon 左右居中 */

    border-radius: 999px !important; /* 圆形按钮 */
    background: #1f7e31 !important; /* button 背景颜色 */
    color: #ffffff !important; /* icon 颜色 */

    font-family: inherit !important; /* icon 字体 */
    font-size: 22px !important; /* icon 大小 */
    font-weight: 900 !important; /* icon 粗细 */
    line-height: 1 !important; /* icon 行高 */

    border: none !important; /* 去掉边框 */
    box-shadow: 0 10px 24px rgba(23, 77, 50, 0.16) !important; /* button 阴影 */

    cursor: pointer !important; /* 鼠标手指 */
  }

  /* nav links 默认隐藏 */
  .site-header .nav-links {
    display: none !important; /* 没打开 menu 时隐藏 */
  }

  /* menu 打开后的 dropdown 白色框 */
  .site-header.nav-open nav.nav-links {
    position: absolute !important; /* dropdown 定位在 navbar 下面 */
    top: calc(100% + 12px) !important; /* dropdown 距离 navbar 的高度 */
    left: 16px !important; /* dropdown 左边距离 */
    right: 16px !important; /* dropdown 右边距离 */

    width: auto !important; /* 宽度跟 left/right 自动 */
    max-width: none !important; /* 不限制宽度 */

    display: flex !important; /* 打开后显示 */
    flex-direction: column !important; /* links 上下排列 */
    gap: 4px !important; /* links 之间距离 */

    padding-top: 14px !important; /* dropdown 上方空间 */
    padding-right: 14px !important; /* dropdown 右边空间 */
    padding-bottom: 14px !important; /* dropdown 下方空间 */
    padding-left: 14px !important; /* dropdown 左边空间 */

    background: #fff8ee !important; /* dropdown 背景 */
    border: 1px solid rgba(23, 77, 50, 0.12) !important; /* dropdown 边框 */
    border-radius: 20px !important; /* dropdown 圆角 */
    box-shadow: 0 18px 45px rgba(23, 77, 50, 0.18) !important; /* dropdown 阴影 */

    z-index: 999999 !important; /* dropdown 在最上面 */
    box-sizing: border-box !important; /* padding 不会撑爆 */
  }

  /* dropdown 里面每一个 link */
  .site-header.nav-open nav.nav-links a {
    width: 100% !important; /* 每个 link 满宽 */
    display: block !important; /* 每个 link 独占一行 */

    padding-top: 12px !important; /* link 上方空间 */
    padding-right: 14px !important; /* link 右边空间 */
    padding-bottom: 12px !important; /* link 下方空间 */
    padding-left: 14px !important; /* link 左边空间 */

    margin: 0 !important; /* 清掉旧外距 */

    color: #174d32 !important; /* link 字颜色 */
    background: transparent !important; /* link 背景 */
    border-radius: 14px !important; /* link hover 圆角 */

    font-family: inherit !important; /* link 字体 */
    font-size: 15px !important; /* link 字大小 */
    font-weight: 900 !important; /* link 字粗细 */
    line-height: 1.2 !important; /* link 行高 */
    text-align: left !important; /* link 文字靠左 */

    text-decoration: none !important; /* 不要底线 */
    box-sizing: border-box !important; /* padding 不会撑爆 */
  }

  /* dropdown link hover */
  .site-header.nav-open nav.nav-links a:hover,
  .site-header.nav-open nav.nav-links a:focus {
    background: rgba(216, 235, 200, 0.7) !important; /* hover 背景颜色 */
    color: #174d32 !important; /* hover 字颜色 */
    text-decoration: none !important; /* hover 不要底线 */
  }

  /* mobile 先隐藏语言和 cart */
  .site-header .language-switcher,
  .site-header .cart-cta,
  .site-header .nav-cta {
    display: none !important; /* mobile 隐藏 EN / 中文 / BM / Cart */
  }

/* ===== 01 NAVBAR MOBILE END ==================================================================================================================== */


/* ===== 02 HOME HERO MOBILE BASE START ===================================================================================================================== */


/* ===== 02 HOME HERO MOBILE BASE END ========================================================================================================================= */


/* ===== 03 HOME PRODUCT HIGHLIGHT MOBILE BASE START ===== */
/* 等 hero 正常后，才放 Product Highlight base */
/* ===== 03 HOME PRODUCT HIGHLIGHT MOBILE BASE END ===== */

/* ===== MOBILE FOOTER ALL SIZE START =============================================================================================================================================*/

/* ===== MOBILE FOOTER CLEAN SAFE START ===== */

/* 整个 footer */
body > footer.site-footer {
  position: static !important; /* 不要 fixed / sticky / absolute */
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  padding-top: 0px !important;
  padding-right: 20px !important;
  padding-bottom: 28px !important;
  padding-left: 20px !important;

  margin-top: 40px !important;
  margin-bottom: 0px !important;

  overflow: visible !important;

  background: #eaf5dd !important;
  color: #4f604d !important;

  box-sizing: border-box !important;
  z-index: auto !important;
  transform: none !important;
}

/* 重点：关掉 footer 可能存在的巨大 overlay */
body > footer.site-footer::before,
body > footer.site-footer::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  position: static !important;
  background: none !important;
  pointer-events: none !important;
}

/* footer grid */
body > footer.site-footer .footer-grid {
  width: 100% !important;
  max-width: 100% !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
  box-sizing: border-box !important;
}

/* 每一组 */
body > footer.site-footer .footer-grid > div {
  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  overflow: visible !important;
}

/* brand */
body > footer.site-footer .footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  margin-bottom: 12px !important;

  text-decoration: none !important;
}

body > footer.site-footer .footer-brand img {
  position: relative !important; /* 不要 fixed / sticky / absolute */
  top: 20px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
}

body > footer.site-footer .footer-brand span {
  color: #174d32 !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* footer description */
body > footer.site-footer .footer-text {
  position: relative !important; /* 不要 fixed / sticky / absolute */
  top: 12px !important;
  color: #4f604d !important;
  font-size: 14px !important;
  line-height: 1.65 !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* headings */
body > footer.site-footer h3 {
  color: #174d32 !important;
  font-size: 17px !important;
  font-weight: 900 !important;

  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

/* links */
body > footer.site-footer a,
body > footer.site-footer .footer-disabled-link {
  display: block !important;

  color: #355d3b !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;

  margin-top: 0 !important;
  margin-bottom: 7px !important;

  text-decoration: none !important;
}

/* bottom copyright */
body > footer.site-footer .footer-bottom {
  width: 100% !important;
  max-width: 100% !important;

  margin-top: 22px !important;
  padding-top: 16px !important;
  padding-bottom: 0 !important;

  border-top: 1px solid rgba(23, 77, 50, 0.14) !important;

  text-align: center !important;
  overflow: visible !important;
}

body > footer.site-footer .footer-bottom span {
  display: block !important;

  color: #4f604d !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* ===== MOBILE FOOTER CLEAN SAFE END ===== */